import React, { Component } from 'react';
import cass from 'classnames';
import styles from './index.module.less';

class ListTab extends Component {

    static defaultProps = {
        status: [
            { value: 0, lable: '进行中', key: 'unfinshed' },
            { value: 1, lable: '已完成', key: 'isfinshed' }
        ],
        activeStatus: 0
    }

    render() {
        // totalMsgCount0 暂时不用到,因为需求是已完成列表有未读消息显示红点
        const { status, activeStatus, onChange, totalMsgCount0, totalMsgCount1 } = this.props;
        const width = `${100 / status.length}%`;
        let newStatus = status;
        if (totalMsgCount1) { // 已完成消息总数
            newStatus = status.map(s => {
                if (s.key === 'isfinshed') return { ...s, count: totalMsgCount1 };
                else return { ...s, count: totalMsgCount0 }
            })
        }
        return (
            <div className={styles.listTab}>
                {newStatus.map(v => (
                    <div
                        key={v.key}
                        style={{ width }}
                        className={cass(styles.item, { [styles.active]: activeStatus === v.value })}
                        onClick={onChange(v.value)}
                    >
                        <span className={styles.wrap}>
                            {v.lable}
                            {v.count ? <span className={cass('mdi', 'mdi-circle', styles.hasNew)} /> : null}
                        </span>
                    </div>
                ))}
            </div>
        );
    }
}

export default ListTab
